<template>
    <div class="coin_whole">
        <div class="coin">
            <router-link to="/usercenter/coincord/input" tag="span" :class="this.path=='/usercenter/coincord/input'?'active':''">收入记录</router-link>
            <router-link to="/usercenter/coincord/output" tag="span" :class="this.path=='/usercenter/coincord/output'?'active':''">支出记录</router-link>
        </div>
        <router-view/>
    </div>
</template>
<script>
export default {
    data(){
        return{
            path:'/usercenter/coincord/input'
        }
    },
    watch:{
        $route(to,from){
            this.path=to.path
        }
    }
}
</script>
<style lang="less" scoped>
.coin_whole{
.coin{
    display: flex;
        padding: 8px 0;
        background-color: white;
        margin: 0 15px 5px;
    span{
        flex: 1;
        text-align: center;
        padding: 15px 0;
        margin: 10px 0;
        color: #e0e0e0;
        // margin-left:5px ;
    }
    span:first-of-type{
        border-right: 2px solid #e9e9e9;
    }
    .active{
        color: black;
    }
}
}

</style>